<template>
  <div>
    <el-table
      :data="tableData"
      :header-cell-style="{
          background:'#E0E0E0'
        }"
        class="tableData-box"
      stripe
      style="width: 100%"
    >
    <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          align="center"
          :width="item.width"
          :key="item.prop"
        >
        <template v-slot="scope">
            <template v-if="item.format == 'STATUS'">
              <div v-if="scope.row[item.prop] == 'up'">
                <el-tooltip content="UP" placement="left" effect="light">
                  <i class="el-icon-bangzhu" style="color:#4CB51E;font-size:20px"></i>
                </el-tooltip>
              </div>
              <div v-else>
                <el-tooltip content="DOWN" placement="left" effect="light">
                  <i class="el-icon-bangzhu" style="color:red;font-size:20px"></i>
                </el-tooltip>
              </div>
            </template>
            <template v-else>
              {{ scope.row[item.prop] }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import { fetchData } from "@/api/index.js";
import bus from "common/bus.js";
import tableColumns from "./PortFluxTableColumns.js";

export default {
  components: {},
  data() {
    return {
      postData: {
        opera: "OSNetworkIfSpeed",
        curPage: 1,
        pageSize: 10,
        sort: {
          sortColumn: "rtx_kbyte",
          sortOrders: "desc",
        },
        filtersType: "fuzzyquery",
        filters: {
          monid: "",
        },
      },
      tableData: [],
      tableColumns: tableColumns,
      selectedMonID: "",
      timerName: "PortFlux",
      timerEventName: "timerPortFlux",
      timerInterval: 1000 * 30,
    };
  },
  created() {
    bus.$on("ItemMonitorServer", (msg) => {
      // 获取数据
      this.selectedMonID = msg;
      this.postData.filters.monid = this.selectedMonID.MONID;
      this.getData();
    });

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getData();
      }
    });
  },
  mounted() {},
  computed: {},
  methods: {
    getData() {
      fetchData({
        postData: JSON.stringify(this.postData),
      }).then((res) => {
        if (res.data.length == 0) {
          this.tableData = [];
        } else {
			console.log(res)
          this.tableData = res.data;
        }
      });
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
  },
  watch: {},
};
</script>

<style scoped lang="scss">
/deep/  .el-table thead {
  color: black;
}
.tableData-box{
    height: calc(100% - 30px);
}
.tableData-box > .el-col {
    height: 100%;
}
.tableData-box /deep/ .el-table__body-wrapper {
  overflow-y: scroll;
  height: 270px;
}
.tableData-box /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.tableData-box /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #E0E0E0;
}

</style>
